<!DOCTYPE html>
<html>

<head>
    <% include global/meta.html %>
        <% include global/top-css.html %>
            <title>yuscms</title>
</head>

<body>

    <main class="main" data-info="<%=admin.permission%>">
        <div class="ys-admin-pos c-a1a3aa">
            首页
            <span class="f-sum">></span>
            <span class="c-565b6d">房产管理</span>
            <span class="f-sum">></span>
            <span class="c-565b6d">新增</span>
        </div>

        <div class="ys-admin-tablist">
            <div class="ys-admin-tab-header row justify-content-b">
                <p class="f-14 c-565b6d pl-8 pt-6"></p>
            </div>

            <div class="mr-10 ml-10">
                <form @submit.prevent="checkForm" name="form">
                    <ul class="overflow-h pb-20">
                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">文档标题</label>
                            </div>
                            <div class="col-10">
                                <input type="text" name="title" v-model="params.title" placeholder="最大50字" class="input" />
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">栏　　目</label>
                            </div>

                            <div class="col-10">
                                <div class="select flex row">
                                    <select class="flex" name="pid" v-model="params.nav" v-html="optionRender()">
                                    </select>
                                </div>
                                {{params.nav}}
                            </div>
                        </li>
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">内容属性</label>
                            </div>

                            <div class="col-bd c-666">
                                <input class="checkbox pos-r t-2 mr-5" type="checkbox" v-model="params.attr" name="attr" value="头条">头条
                                <input class="checkbox pos-r t-2 mr-5 ml-10" type="checkbox" v-model="params.attr" name="attr" value="推荐">推荐
                                <input class="checkbox pos-r t-2 mr-5 ml-10" type="checkbox" v-model="params.attr" name="attr" value="加粗">加粗
                                <input class="checkbox pos-r t-2 mr-5 ml-10" type="checkbox" v-model="params.attr" name="attr" value="跳转">跳转
                            </div>
                        </li>

                        <!-- 房产模块 start -->
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">类　　型</label>
                            </div>

                            <div class="col-bd c-666">
                                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.type" name="type" value="1">整租
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.type" name="type" value="2">合租
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.type" name="type" value="3">住宅
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.type" name="type" value="4">写字楼
                            </div>
                        </li>

                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">价　　格</label>
                            </div>
                            <div class="col-10">
                                <input type="number" name="price" v-model="params.price" placeholder="价格，租金" class="input" />
                            </div>
                        </li>

                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">户　　型</label>
                            </div>
                            <div class="col-bd c-666">
                                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.huxing" name="huxing" value="1">1居
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.huxing" name="huxing" value="2">2居
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.huxing" name="huxing" value="3">3居
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.huxing" name="huxing" value="4">4居
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.huxing" name="huxing" value="5">4居以上
                            </div>
                        </li>

                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">面　　积</label>
                            </div>
                            <div class="col-10">
                                <input type="number" name="mianji" v-model="params.mianji" placeholder="建筑面积" class="input" />
                            </div>
                        </li>

                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">朝　　向</label>
                            </div>
                            <div class="col-bd c-666">
                                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.chaoxiang" name="chaoxiang" value="1">朝南
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.chaoxiang" name="chaoxiang" value="2">朝北

                            </div>
                        </li>
                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">风　　格</label>
                            </div>
                            <div class="col-bd c-666">
                                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.fengge" name="fengge" value="1">待定
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.fengge" name="fengge" value="2">待定
                            </div>
                        </li>
                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">学　　校</label>
                            </div>
                            <div class="col-bd c-666">
                                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.xuexiao" name="xuexiao" value="1">有
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.xuexiao" name="xuexiao" value="2">没有
                            </div>
                        </li>
                        <li class="row  pd-10 f-14">
                            <el-form ref="form" :model="params" label-width="68px" size="mini">

                                <el-form-item label="区　　域">
                                    <el-select v-model="params.quyu" placeholder="请选择活动区域">
                                        <el-option label="新华区" value="新华区"></el-option>
                                        <el-option label="长安区" value="长安区"></el-option>
                                        <el-option label="裕华区" value="裕华区"></el-option>
                                        <el-option label="桥东区" value="桥东区"></el-option>
                                        <el-option label="桥西区" value="桥西区"></el-option>
                                        <el-option label="开发区" value="开发区"></el-option>
                                        <el-option label="鹿泉区" value="鹿泉区"></el-option>
                                        <el-option label="藁城区" value="藁城区"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </li>

                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">地　　址</label>
                            </div>
                            <div class="col-10">
                                <input type="text" name="addr" v-model="params.addr" placeholder="详细地址" class="input" />
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">厨　　卫</label>
                            </div>

                            <div class="col-10">
                                <input type="text" name="chuwei" v-model="params.chuwei" placeholder="一厨一卫" class="input" />
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">开盘时间</label>
                            </div>

                            <div class="col-10">
                                <el-date-picker v-model="params.kaipan_time" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">证　　件</label>
                            </div>

                            <div class="col-10">
                                <input type="text" name="zhengjian" v-model="params.zhengjian" placeholder="五证齐全" class="input" />
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">交　　通</label>
                            </div>

                            <div class="col-10">
                                <input type="text" name="jiaotong" v-model="params.jiaotong" placeholder="交通" class="input" />
                            </div>
                        </li>

                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">当前楼层</label>
                            </div>
                            <div class="col-10">
                                <input type="number" name="cur_louceng" v-model="params.cur_louceng" placeholder="当前楼层" class="input" />
                            </div>
                        </li>

                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">总共楼层</label>
                            </div>
                            <div class="col-10">
                                <input type="number" name="total_louceng" v-model="params.total_louceng" placeholder="总共楼层" class="input" />
                            </div>
                        </li>

                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">状　　态</label>
                            </div>
                            <div class="col-bd c-666">
                                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.zhuangtai" name="zhuangtai" value="1">在售
                                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.zhuangtai" name="zhuangtai" value="2">售罄
                            </div>
                        </li>

                        <!-- 房产模块 end -->


                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">TAG标签</label>
                            </div>
                            <div class="col-10 c-666">
                                <input type="text" name="tag" id="" placeholder="例新闻,美女" v-model="params.tag" class="input" />
                            </div>
                        </li>


                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">关&nbsp; 键&nbsp; 字</label>
                            </div>
                            <div class="col-10 c-666">
                                <input type="text" name="keyword" v-model="params.keyword" placeholder="例yuscms,cms管理系统" id="" class="input" />
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">缩&nbsp; 略&nbsp; 图</label>
                            </div>
                            <div class="col-bd row c-666">
                                <img v-if="params.thumburl" class="thumb" :src="params.thumburl" alt="">
                                <span class="ico-camera">
                                    <input @change="sendThumb" type="file" name="pic" id="thumb">
                                </span>
                            </div>
                            <div class="col-ft col-16 c-999">
                                (缩略图必须是jpg,gif,png,并且50k之内)
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">文章来源</label>
                            </div>
                            <div class="col-10 c-666">
                                <input type="text" name="source" id="" v-model="params.source" placeholder="请输入文章来源，例网络" class="input" />
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">作　　者</label>
                            </div>
                            <div class="col-10">
                                <input type="text" name="author" id="" v-model="params.author" class="input c-666" placeholder="请输入作者，例session.admin_user"
                                />
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">内容摘要</label>
                            </div>
                            <div class="col-10 c-666 row">
                                <textarea class="flex textarea pt-5" v-model="params.info" name="info" id="" placeholder="请输入内容摘要，(内容摘要200之内)" cols="30"
                                    rows="3"></textarea>
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">栏目内容</label>
                            </div>

                            <div class="col-bd c-666">
                                <div id="editor" class="pos-r z1">
                                    <p>欢迎使用
                                        <b>yuscms</b> 系统!</p>
                                </div>
                                <input type="hidden" name="content" v-model="params.content">
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">发布时间</label>
                            </div>

                            <div class="col-10">
                                <el-date-picker v-model="params.date" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-12 row">
                                <label class="label pt-4">浏览次数</label>
                                <input type="number" name="count" v-model="params.count" class="flex input c-666" value="0">
                            </div>
                            <div class="col-12 row">
                                <label class="label pt-4 ml-10">管家电话</label>
                                <input type="number" v-model="params.gold" class="c-666 flex input" pattern="[0-9]*" name="gold">
                            </div>
                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-12 row">
                                <label class="label pt-4">文档排序</label>
                                <div class="select flex pos-r">
                                    <select name="sort" class="wauto c-666" v-model="params.sort" id="">
                                        <option value="0">默认排序</option>
                                        <option value="1">置顶一天</option>
                                        <option value="2">置顶一周</option>
                                        <option value="3">置顶一月</option>
                                        <option value="4">置顶一年</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 row">
                                <label class="label pt-4 ml-10">阅读权限</label>
                                <div class="select flex pos-r">
                                    <select name="readlimit" class="wauto c-666" v-model="params.readlimit" id="">
                                        <option value="0" selected="selected">开发浏览</option>
                                        <option value="1">初级会员</option>
                                        <option value="2">中级会员</option>
                                        <option value="3">高级会员</option>
                                        <option value="4">VIP会员</option>
                                    </select>
                                </div>
                            </div>

                        </li>

                        <li class="row pd-10 f-14">
                            <div class="col-12">
                                <label class="label">评论选项</label>
                                <input type="radio" class="radio pos-r t-4 mr-5" v-model="params.comment" name="comment" checked="checked" value="1">允许评论
                                <input type="radio" class="radio pos-r t-4 mr-5 ml-10" v-model="params.comment" name="comment" value="0">禁止评论
                            </div>
                        </li>

                        <li class="pd-10 mt-35">
                            <div class="col-hd">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                            </div>
                            <div class="col-bd row ml-35">
                                <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布" />
                                <input name="send" class="btn btn-reset ml-35" type="reset" value="重置" />
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </main>

    <% include global/all-js.html %>
        <script>
            var vm = new Vue({
                el: '.main',
                data: {
                    list: [],
                    params: {
                        title: "",
                        nav: "0",
                        attr: [],
                        tag: "",
                        keyword: "",
                        thumburl: "",
                        source: "网络",
                        author: "admin",
                        info: "",
                        content: "",
                        comment: "1",
                        count: "0",
                        sort: "1",
                        gold: "0",
                        readlimit: "0",
                        date: new Date(),
                        //房产模块
                        type: 1,//类型：1->整租 2->合租 3->住宅 4->写字楼
                        price: 0,//租金 价格
                        huxing: 1,//户型：1->1居 2居 3居 4居 5->4局以上
                        mianji: 0,//面积
                        chaoxiang: 1,//朝向：1朝南 2朝北
                        fengge: 1,//风格：待定
                        xuexiao: 1,//学校：1有 2没有
                        quyu: '新华区',//新华区、长安区、裕华区、桥东区、桥西区、开发区、鹿泉区、藁城区
                        addr: '',//地址
                        chuwei: 1,//1独立厨卫 2没有
                        kaipan_time: new Date(),//开盘时间
                        zhengjian: '',//证件
                        jiaotong: '',//交通
                        cur_louceng: 0,//当前楼层
                        total_louceng: 0,//总楼层
                        zhuangtai: 1 //状态 1 在售 2售罄

                    }
                },
                methods: {
                    getData() {
                        var _this = this;
                        axios
                            .get("/api/admin/category")
                            .then(data => {
                                var filterData = data.data;
                                if (filterData.success) {
                                    _this.list = filterData.data;
                                } else {
                                    location.href = "/admin/login";
                                }
                            })
                            .catch(error => {
                                console.error(error);
                            });
                    },

                    optionRender: function () {
                        let list = this.list;
                        let str = '<option selected="selected" value="0">顶部导航</option>';

                        function option(list) {
                            for (var item of list) {
                                if (item.pid != 0) {
                                    str += `<option value="${item.id}${"," +
                                        item.level}">${"&nbsp;&nbsp;".repeat(
                                            item.level
                                        )}|-${item.nav_name}</option>`;
                                } else {
                                    str += `<option value="${item.id}${"," +
                                        item.level}">${item.nav_name}</option>`;
                                }
                                if (item.children) {
                                    option(item.children);
                                }
                            }
                        }
                        option(list);
                        return str;
                    },

                    sendThumb: function () {
                        var _this = this;

                        var formData = new FormData();
                        formData.append("file", $("#thumb")[0].files[0]);
                        var thumb = $("#thumb")
                            .val()
                            .split(".")[1];

                        if (
                            thumb != "jpg" &&
                            thumb != "gif" &&
                            thumb != "jpeg" &&
                            thumb != "png"
                        ) {
                            tipsWarn(_this, "请上传图片！");
                            return false;
                        }

                        if ($("#thumb")[0].files[0].size / 1000 > 100) {
                            tipsWarn(_this, "为了节省空间，缩略图不能超过100k");
                            return false;
                        }

                        let config = {
                            headers: { "Content-Type": "multipart/form-data" }
                        };

                        axios
                            .post("/api/admin/article/thumb", formData, config)
                            .then(data => {
                                let filterData = data.data;
                                _this.params.thumburl = filterData.data[0];
                            })
                            .catch(error => {
                                console.error(error);
                            });
                    },

                    editor: function () {
                        var _this = this;

                        var editor = new wangEditor('#editor');
                        editor.customConfig.debug = true;
                        editor.customConfig.uploadImgServer = '/api/admin/upload/img';//上传到服务器API地址
                        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
                        editor.customConfig.uploadImgMaxLength = 5;
                        editor.customConfig.linkCheck = function (text, link) {
                            return true
                        }
                        editor.create();
                        $('.w-e-text').on('input', function () {
                            _this.params.content = editor.txt.html();
                        });

                    },

                    articleAdd() {
                        let _this = this;
                        if (_this.params.nav.includes(',')) {
                            _this.params.nav = _this.params.nav.split(',')[0]
                        }
                        console.log(_this.params);
                        //this.params.date = this.params.date.getTime();
                        axios.post('/api/admin/house/add', _this.params)
                            .then((data) => {
                                let filterData = data.data;
                                if (filterData.data.affectedRows >= 1) {
                                    tips(_this, '添加成功！')
                                }
                            })
                            .catch((error) => {
                                console.log(error);
                            });

                    },
                    checkForm: function () {
                        var _this = this;
                        var fm = document.form;

                        var _this = this;
                        if (_this.params.title == '' || _this.params.title.length < 2 || _this.params.title.length > 50) {
                            tipsWarn(_this, '标题不得为空且不能小于两位不大于50位！');
                            fm.title.focus();
                            return false;
                        }

                        if (_this.params.price == 0) {
                            tipsWarn(_this, '不要随便忽悠，价格肯定不是零蛋');
                            fm.price.focus();
                            return false;
                        }

                        if (_this.params.mianji == 0) {
                            tipsWarn(_this, '不要随便忽悠，房子面积肯定不是0');
                            fm.mianji.focus();
                            return false;
                        }

                        if (_this.params.quyu == '') {
                            tipsWarn(_this, '不要随便忽悠，请选择区域');
                            return false;
                        }

                        if (_this.params.addr == '') {
                            tipsWarn(_this, '不要随便忽悠，房子竟然没有地址！');
                            return false;
                        }

                        if (_this.params.tag.length > 30) {
                            tipsWarn(_this, 'tag标签长度不能不大于30位！');
                            fm.tag.focus();
                            return false;
                        }

                        if (_this.params.keyword.length > 30) {
                            tipsWarn(_this, '关键字长度不能不大于30位！');
                            fm.keyword.focus();
                            return false;
                        }

                        if (_this.params.source.length > 20) {
                            tipsWarn(_this, '文章来源长度不能不大于20位！');
                            fm.source.focus();
                            return false;
                        }

                        if (_this.params.author.length > 10) {
                            tipsWarn(_this, '作者长度不能不大于10位！');
                            fm.author.focus();
                            return false;
                        }

                        if (_this.params.info.length > 200) {
                            tipsWarn(_this, '文章摘要不能超过200个字！');
                            return false;
                        }

                        if (_this.params.content.length <= 0) {
                            tipsWarn(_this, '文章内容不能为空！');
                            return false;
                        }

                        if (_this.params.gold.value < 0) {
                            tipsWarn(_this, '金币不能小于0');
                            return false;
                        }

                        if (_this.params.count < 0) {
                            tipsWarn(_this, '浏览次数不能小于0');
                            return false;
                        }

                        _this.articleAdd()

                    }
                },

                created: function () {
                    this.getData();
                },

                mounted: function () {
                    this.editor();
                }
            });
        </script>
</body>

</html>